<template>
  <span @click="openModal" style="cursor: pointer;" v-if="data.nameCn">
    <slot>
      {{ data[props.attr] }}
    </slot>
  </span>
  <a-modal
    :width="'100%'"
    style="height: 100%; top: 8px"
    v-model:open="open"
    :title="title"
    @ok="closeModal"
  >
    <BasicInfo :data="data" v-if="data.id"></BasicInfo>
  </a-modal>
</template>
<script setup>
import pmpHooks from '@/hooks/PmpHooks.js'
import { ref, onMounted, watch } from 'vue'
import BasicInfo from '@/components/BasicInfo.vue'
const props = defineProps({
  id: {
    type: String,
    default: () => {},
  },
  attr: {
    type: String,
    default: 'nameCn',
  },
})

const data = ref({})
const title = ref('')

onMounted(() => {
  // data.value = pmpHooks.pmpDict.value[props.id]
  data.value = pmpHooks.loadPmpDictDetail(props.id)
  title.value = pmpHooks.loadPmpDictDetail(props.id).nameCn
})

watch(
  () => props.id,
  (v) => {
    data.value = pmpHooks.loadPmpDictDetail(v)
    title.value = pmpHooks.loadPmpDictDetail(v).nameCn
  }
)

// watch(props.id, (newValue, oldValue) => {
//     console.log("watch",newValue,oldValue)
//     data.value = pmpHooks.pmpDict.value[props.id]
// })

const open = ref(false)
function closeModal() {
  open.value = false
}

function openModal() {
  // console.log('=====', props.id)

  // console.log('=====', data.value)
  open.value = true
}
</script>
<style scoped></style>
